<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/login.css"/>
	<!-- 	<script type="text/javascript">
			window.onload=function(){
			var btn=document.querySelector("button");
			btn.onclick=function(){
				var box=document.querySelector(".box");
				box.style.display="flex";
			}	
			var close=document.querySelector(".close");
			close.onclick=function(){
				var box =document.querySelector(".box");
				box.style.display="none";
			}
			}
		</script> -->
		
		<script type="text/javascript">
			window.onload=function(){
				var forms=document.querySelectorAll(".box .text form");
				// 寻找2个from表格
				var btns=document.querySelectorAll(".box .title a");
				// 寻找2个a标签
				for(var i=0;i<btns.length;i++){
					// 循环找到2个a标签，并给第一个a标签添加点击事件
					btns[i].onclick=function(){
						for (var j=0;j<btns.length;j++) {
							// 把点击后所有a标签classname清空
							btns[j].className= "";
							// 
						}
						this.className="active";
						// 给点击的这个a标签添加classname
				var idx=this.attributes["data-idx"].value;
						console.log(idx);
						// html代码生明一个值，用来调用from
						for(var j=0;j<forms.length;j++){
							forms[j].style.display="none";
							//点击这个a标签，然后所有form的样式变成不显示
						}
						forms[idx].style.display="block";
						//点击a标签，然后点击的那个form显示
					}
				}
			}
		</script>
	</head>
	<body>
		<!-- <button type="button">显示登陆框</button>
	<div class="box">
		<div class="content">
			<span class="close">&times;</span>
		</div>
	</div> -->
	
	<div class="content">
		<div class="box">
			<div class="right">
		<div class="title">
			<a href="#" class="active" data-idx="0">登录</a>
			<a href="#" data-idx="1" >注册</a>
		</div>
		<div class="text">
			<form action="#" method="get">
				<div>
					<input type="text" name="name" id="name" value="" />
				</div>
				<div>
					<input type="password" name="pwd" id="pwd" value="" />
				</div>
				<div>
					<input type="checkbox" name="chk" id="chk" value="" />
				<label for="chk">自动登录</label>
				</div>
				<div><input type="submit" value="登录"/></div>	
			</form>
		
		<form action="" method="get">
			
			<input type="submit" value=""/>
		
		</form>
		</div>
		</div>
		      </div>
	</div>
	</body>
</html>
